<template>
	<view class="pages">
		<h-nav-bar :fixed="true" title="请横着屏幕手写" backgroundColor="rgba(0,0,0,0)"></h-nav-bar>
		<view class="qian_box">
			<view class="qian_box_ban_ti">签字范围</view>
			<view class="qian_box_ban" @touchstart="imgUrl='',dian=true">
				<image class="qian_box_ban_img" :src="imgUrl" v-if="imgUrl"></image>
				<l-signature landscape disableScroll ref="signatureRef" penColor="#202020" :penSize="5" :openSmooth="openSmooth"></l-signature>
			</view>
			<view class="qian_box_btn">
				<button class="qian_box_btnb" @click="onClick('clear')">清除</button>
				<button class="qian_box_btna" @click="onClick('save')">保存</button>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive, nextTick } from 'vue'
	import {
		onLoad,
		onPullDownRefresh,
		onReachBottom,
		onReady,
		onShow,
		onPageScroll,
		onUnload,
		onHide,
		onBackPress,
	} from '@dcloudio/uni-app'
	import { uploadApi } from '@/utils/upLoad'
	import { navigateTo, showToast, navigateBack, redirectTo } from '@/utils'
	const imgUrl=ref("")
	onLoad((o) => {
		if(o.img){
			imgUrl.value=o.img
		}
	})
	onShow(() => {})
	onReady(() => {

	})
	const dian=ref(false)
	const openSmooth = ref(true)
	const signatureRef = ref(null)
	function onClick(type) {
		if(type == 'openSmooth') {
			openSmooth.value = !openSmooth.value
			return
		}
		if(type == 'save') {
			if(!dian.value&&!imgUrl.value){
				showToast("还未签名！")
				return false;
			}
			signatureRef.value.canvasToTempFilePath({
				success: async(res) => {
					if(imgUrl.value&&!dian.value){
						const img = imgUrl.value
						imgUrl.value=""
						uni.setStorageSync('signUrl',img)
						navigateBack()
					}else{
						const imgUrl = await uploadApi(res.tempFilePath)
						uni.setStorageSync('signUrl',imgUrl)
						navigateBack()
					}
				}
			})
			return
		}
		if(type == 'clear'){
			imgUrl.value=""
            signatureRef.value.clear()
        }
		if(signatureRef.value) signatureRef.value[type]()
	}
</script>

<style>
	page {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.flex {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.clear:after {
		/*START 真正起到清除浮动的代码*/
		content: '';
		display: block;
		clear: both;
		/*END 真正起到清除浮动的代码*/
		height: 0;
	}

	.clear {
		display: inline-block;
	}

	.left {
		float: left;
	}

	.right {
		float: right;
	}
	.pages{
		height:100vh;
		display: flex; flex-direction: column;
	}
	.qian_box {
		box-sizing: border-box;
		border-top: 1rpx dashed #aaaaaa;
		width: 100vw;
		flex: 1;
		position: relative;
		display: flex; flex-direction: column;
		.qian_box_ban {
			width: 100vw;
			flex: 1;
			box-sizing: border-box;
			border-bottom: 1rpx dashed #aaaaaa;
			position: relative;
			.qian_box_ban_img{
				position: absolute;
				top: 17vh;
				left: -36.5vw;
				width:80vh;
				height:100vw;
				transform: rotate(90deg);
			}
		}
		.qian_box_ban_ti {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 560rpx;
			height: 196rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 140rpx;
			color: #f5f6f8;
			line-height: 196rpx;
			text-align: center;
			font-style: normal;
			margin-left: -280rpx;
			margin-top: -294rpx;
			transform: rotate(90deg);
		}
		.qian_box_btn {
			width: 100%;
			height: 20vh;
			position: relative;
			background: #f5f6f8;
			button {
				position: absolute;
				top: 50%;
				width: 140rpx;
				height: 68rpx;
				border-radius: 34rpx;
				float: left;
				margin-top: -34rpx;
				line-height: 68rpx;
				font-size: 30rpx;
				transform: rotate(90deg);
			}
			.qian_box_btna {
				background: #00c1b9;
				color: #fff;
				left: 220rpx;
			}
			.qian_box_btnb {
				background: #f5f6f8;
				border-radius: 34rpx;
				border: 1rpx solid #00c1b9 !important;
				color: #00c1b9;
				left: 120rpx;
			}
		}
	}
</style>
